<template>
  <el-input v-if="editing" rows="24" type="textarea" v-bind="$attrs" @dblclick="editing = false" />
  <highlight-js v-else :code="$attrs.modelValue" :language="language" @dblclick="editing = true" />
</template>

<script lang="ts">
  import { defineComponent, PropType } from 'vue';
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  import hljsVuePlugin from '@highlightjs/vue-plugin';
  import { ElInput } from 'element-plus';
  import 'highlight.js/styles/atom-one-dark.css';

  export default defineComponent({
    name: 'CodeEditor',
    components: {
      highlightJs: hljsVuePlugin.component,
      ElInput
    },
    inheritAttrs: false,
    props: {
      language: {
        type: String as PropType<string>,
        default: 'json'
      }
    },
    data() {
      return {
        editing: false
      };
    }
  });
</script>

<style scoped>

</style>
